<template>
    <div class="more-text">
        <div class="text-container">
            <span class="init-text" v-if="!btnCollapsed">{{ text }}</span>
            <span v-else>{{ truncatedText }}...</span>

        </div>
        <el-button v-if="btnCollapsed" @click="changeBtnCollapsed" type="primary" size="small">展开</el-button>
        <el-button v-else @click="changeBtnCollapsed" type="primary" size="small">折叠</el-button>

    </div>
</template>

<script>
export default {
    data() {
        return {
            btnCollapsed: false,
            text:'这是一段很长的文本，超过十个字符将会显示为省略号，并且具有折叠和展开的功能。'


        }
    },
    methods: {
        changeBtnCollapsed() {
            this.btnCollapsed = !this.btnCollapsed
        }

    },
    created() {
        console.log(9999);

    },
    computed:{
        truncatedText(){
            return this.text.substring(0, 10);
        }
    }
}
</script>
<style scoped lang="scss">
.more-text {
    margin-top: 50px;
}
</style>